<template lang="pug">
  v-container
    AssetBundleAddDialog(ref="addDialog" @refresh="refresh")
    AssetBundleDetails(ref="details" :bundle="bundle" @refresh="refresh")
    v-card
      v-toolbar
        v-text-field(prepend-inner-icon="search" placeholder="搜索" hide-details v-model="query" clearable)
        v-spacer
        v-toolbar-items
          v-btn(text @click="refresh") 刷新
          v-btn(text @click="add") 新增组合
      v-divider
      v-card-text.pa-0.mt-4
        AssetBundleDataTable(@edit="edit" ref="dataGrid" :query.sync = "query")
</template>

<script lang="ts">
  import Vue, {VueConstructor} from 'vue'
  import AssetBundleDataTable from './asset_bundle_data_table'
  import AssetBundleAddDialog from './asset_bundle_add_dialog'
  import AssetBundleDetails from './asset_bundle_details'

  export default (Vue as VueConstructor<Vue & {
    $refs: {
      addDialog: AssetBundleAddDialog
      details:AssetBundleDetails
    }
  }>).extend({
    methods: {
      refresh() {
        this.$refs.dataGrid.refresh()
      },
      add() {
        this.$refs.addDialog.toggle()
      },
      edit(bundle: any) {
        this.bundle = bundle
        this.$refs.details.toggle(`资产组合 ${this.bundle.name}`)
      }
    },
    components: { AssetBundleDataTable, AssetBundleAddDialog, AssetBundleDetails },
    data() {
      return {
        bundle: {},
        query: ''
      }
    }
  })
</script>
